| Echarts | 您所在的位置：网站首页 › echarts 线条宽度 › Echarts |
Echarts
|
这是我参与8月更文挑战的第4天，活动详情查看：8月更文挑战 系列文章： Echart Bar 柱状图样式详解 Echarts Bar 横向柱状图 基础配置 title 标题组件 let title = { text: "累计消费趋势", // 标题 subtext: "同比上年同期，累计消费增加200元", // 副标题 top: -5, // 定位 left: -5, // 定位 subtextStyle: { // 副标题样式 color: "#808080", fontSize: 12, }, }; legend 图例组件将图例设置为圆形(icon)，并且更改图例大小(itemHeight)和间距(itemGap) 修改图例文字和图表的距离：textStyle.padding，设置为负数时，就可以缩小间距了 let legend = { top: 24, // 定位，和副标题一排 right: 0, // 定位，和副标题一排，且在右边 icon: "circle", // 图例形状 // itemWidth: 25, // 图例标记的图形宽度 itemHeight: 6, // 图例标记的图形高度 itemGap: 24, // 图例每项之间的间隔 itemStyle: {}, // 图例的图形样式 textStyle: { // 图例文字属性 fontSize: 12, color: "#333", padding: [0, 0, 0, -8], // 修改文字和图标距离 }, }; grid 绘图网格一般用于调整绘图区域的属性，例如位置，距离等 ler grid = { top: 70, left: 0, right: 12, bottom: 0, containLabel: true, } xAxis 轴 默认只展示第一个和最后一个坐标(interval)，但是鼠标悬浮时要展示对应的 x 轴标签和 tooltip 配置(具体见tooltip配置) 指示器相关配置(axisLine, axisPointer) let xAxis = R.mergeDeepRight(xAxis, { type: "category", boundaryGap: false, // 不留白 axisLabel: { interval: 50, // 只显示最大和最小坐标 showMinLabel: true, // 显示最小标签 showMaxLabel: true, // 显示最大标签 }, axisLine: { lineStyle: { type: "dashed", // 直线指示器为虚线 // dashOffset: 5 // 虚线的偏移量 }, }, axisPointer: { type: "line", // 直线指示器 }, }); series 数据列设置拐点的形状和大小（symbol，symbolSize）；默认不显示，只有 hover 时才显示（showSymbol） 设置区域背景色areaStyle.color let series = [ { type: "line", color: "#1890ff", // 线条颜色 areaStyle: { color: "rgba(24,144,255,0.08)", // 区域背景色 }, showSymbol: false, // 只有在 tooltip hover 的时候显示 symbol: "emptyCircle", // 拐点形状 symbolSize: 6, //拐点大小 }, { type: "line", color: "#52c41a", areaStyle: { color: "rgba(82,196,26,0.08)", }, showSymbol: false, symbol: "emptyCircle", symbolSize: 6, }, ]; tooltip 提示框 axisPointer.label.show = true：鼠标悬浮时，显示 x 轴标签，如 2 月，3 月； axisPointer.label.backgroundColor = transparent：鼠标悬浮时，去除刻度标签的背景色； axisPointer.label.padding = [20, 0, 0, 0]：调整刻度标签和轴线的距离； position = [10, 10]：tooltip提示框相对容器定位，固定位置； position = format()：tooltip提示框相对鼠标定位，相对位置； formatter：自定义内容实现 let tooltip = { trigger: "axis", // 指示器样式配置 axisPointer: { type: "cross", label: { show: true, color: "#808080", fontSize: 12, padding: [20, 0, 0, 0], backgroundColor: "transparent", }, lineStyle: { color: "#808080", width: 0.5, }, // position: [10, 10], // position(point, params) { // // 默认距离鼠标定位 // if (params.length) { // const { axisIndex, axisValue } = params[0]; // instance.convertToPixel({ xAxisIndex: axisIndex }, axisValue); // axisPointer position x // } // }, formatter: function(params) { let html = ` 截止 ${params[0].axisValue} ${params .map( ( item ) => ` ${item.seriesName} ${ item.value[item.encode.y[0]] } ` ) .join("")} `; return html; }, }, }; 总体效果展示 let options = { title, legend, grid, xAxis, yAxis: R.merge(yAxis, { type: "value", axisPointer: { show: false, }, }), series, dataset: { dimensions: ["金额", "2020年累计消费", "2021年累计消费"], source: [ ["1月", 200, 100], ["2月", 288, 200], ["3月", 360, 486], ["4月", 450, 680], ], }, tooltip, } |
【本文地址】
公司简介
联系我们